<!--
 * @Author: wangding
 * @Date: 2020-10-23 16:23:27
 * @LastEditTime: 2021-01-06 17:52:27
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \solaxcloud\src\views\system\menu\index.vue
-->
<template>
    <div class='menu-main-box'>
        <div class="left-menu-box" >
            <!-- <keep-alive> -->
                <baseDrawer :title="$t('menu.menuName')" @changeShow='changeShow' >
                    <tree :allMenusList='allMenusList' @clickData='clickData'></tree>
                </baseDrawer>
            <!-- </keep-alive> -->
        </div>
        <div class="right-menu-box" :style="changeShowFlag?'width: calc(100% - 200px);':'width: 100%;'">
            <div class="search-box">
                <div class="search-box-sub">
                <span class="lable-text">{{$t('menu.menuName')}}</span>
                <el-input style="width:160px;" v-model="menuName" :placeholder="$t('common.info.pl-insert-content')"></el-input>
                </div>
                <div class="search-box-sub">
                    <el-button type="primary" @click='query'>{{$t('query')}}</el-button>
                </div>
            </div>
            <div class="button-box">
                <el-button type="primary" icon='el-icon-edit' class="marginR10" @click="()=>{$store.commit('setMenuVisible',true)}">{{$t('add')}}</el-button>
                <el-popconfirm
                        :confirm-button-text='$t("sure")'
                        :cancel-button-text='$t("cancel")'
                        :title="$t('promotionManagement.allDelete')"
                    @confirm='menuDeleteEntity()'
                >
                    <el-button type="danger" slot="reference" icon='el-icon-delete' >{{$t('delete')}}</el-button>
                </el-popconfirm>
            </div>
            <baseTable v-loading="loading"  row-key='sid' :data="dataRows" border  stripe @selection-change="handleSelectionChange($event)"  :column='column' :select='true'>
                <!-- <template #roleType="{data}">
                {{returnRoleTypeCode(data.roleType)}}
                </template>
                <template #enableFlag="{data}">
                {{returnIsUseCode(data.enableFlag)}}
                </template> -->
                <template #option="{data}">
                <div class="option-box">
                    <el-button size='small' type="primary" icon="el-icon-edit"  @click='editMenus(data)' class="marginR10"></el-button>
                    <el-popconfirm
                            :confirm-button-text='$t("sure")'
                            :cancel-button-text='$t("cancel")'
                            :title="$t('index.delete_item_confirm')"
                        @confirm='menuDeleteEntitySub(data.sid)'
                    >
                        <el-button class="marginR10" type="danger" slot="reference" icon='el-icon-delete' ></el-button>
                    </el-popconfirm>
                </div>
                </template>
            </baseTable>
            <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="current"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
            </el-pagination>
            <add :allMenusList='allMenusListSub' @uploadData='uploadData' v-if='menuVisible'></add>
            <edit :allMenusList='allMenusListSub' @uploadData='uploadData' :editRowData='editRowData'></edit>
        </div>
    </div>
</template>

<script>
import baseTable from '../../../components/common/baseTable'
import baseDrawer from '../../../components/common/baseDrawer'
import tree from './tree'
import add from './add.vue'
import edit from './edit.vue'
export default {
    components: {
        baseDrawer,
        tree,
        baseTable,
        add,
        edit
    },
    props: {

    },
    data() {
        return {
            allMenusList:[],
            menuName:'',
            size:10,
            current:1,
            pid:'',
            loading:false,
            dataRows:[],
            total:1,
            column:[{
                title: this.$t('menu.menuName'),
                value: 'menuName',
            },
            {
                title: this.$t('menu.pName'),
                value: 'pName',
                slot: 'pName'
            },
            {
                title: this.$t('menu.menuURL'),
                value: 'menuURL',
                slot: 'menuURL',
                min_width:'300'
            },{
                title: this.$t('menu.menuLevel'),
                value: 'menuLevel',
                slot: 'menuLevel'
            },{
                title: this.$t('menu.isLeaf'),
                value: 'isLeaf',
                slot: 'isLeaf'
            },{
                title: this.$t('menu.sort'),
                value: 'sort',
                slot: 'sort'
            },{
                title: this.$t('control'),
                value: 'sid',
                slot: 'option'
            }],
            changeShowFlag:true,
            selectDataList:[],
            editRowData:{},
            allMenusListSub:[]
        };
    },
    computed: {
        menuVisible(){
            return this.$store.state.sysStore.menuVisible
        }
    },
    watch: {
        
    },
    created() {

    },
    mounted() {
        this.getRoleMenuByParentId()
        this.menuGetPage()
    },
    methods: {
        editMenus(data){
            this.editRowData = data
            this.$store.commit('setMenuVisibleEdit',true)
        },
        async menuDeleteEntity(){
            if(this.selectDataList.length == 0){
                this.comm.showMsg(false,this.$t('index.delete_select'))
                return
            }
            let ids = this.selectDataList.map(item =>{
                return item.sid
            })
            let res = await this.API.menuDeleteEntity({
                ids
            })
            if(res.success){
                this.$message({
                message: this.$t('index.control_success'),
                type: 'success'
                });
                this.query()
            }else{
                this.$message({
                message: this.$t('index.control_fail'),
                type: 'warning'
                });
            }
        },
        async menuDeleteEntitySub(id){
            let res = await this.API.menuDeleteEntity({
                ids:id
            })
            if(res.success){
                this.$message({
                message: this.$t('index.control_success'),
                type: 'success'
                });
                this.query()
            }else{
                this.$message({
                message: this.$t('index.control_fail'),
                type: 'warning'
                });
            }
        },
        uploadData(val){
            this.query()
        },
        changeShow(flag){
            this.changeShowFlag = flag
        },
        async menuGetPage(){
            this.loading = true
            let res = await this.API.menuGetPage({
                pid: this.pid,
                menuName:this.menuName,
                size: this.size,
                current: this.current,
            })
            this.loading = false
            this.dataRows = res.rows
            this.total = res.total
        },
        query(){
            this.current = 1
            this.menuGetPage()
        },
        clickData(data){
            this.pid = data.sid
            this.menuGetPage()
        },
        async getRoleMenuByParentId(){
            let res = await this.API.getRoleMenuByParentId({
                pid:0
            })
            this.allMenusList = res
            this.allMenusListSub = JSON.parse(JSON.stringify(res))
            // let obj = {
            //     id:'0',
            //     sid:'0',
            //     menuName:'菜单'
            // }
            // this.allMenusListSub.unshift(obj)
            // for(let i = 0;i<this.allMenusListSub.length;i++){
            //         if(this.allMenusListSub[i].sid == pid){
            //         this.$set(this.allMenusListSub[i],'children',[...res])
            //     }
            // }
            this.comMenus()
        },
        async getRoleMenuSub(pid){
            let res = await this.API.getRoleMenuByParentId({
                pid:pid
            })
            for(let i = 0;i<this.allMenusList.length;i++){
                    if(this.allMenusList[i].sid == pid){
                    this.$set(this.allMenusList[i],'children',[...res])
                }
            }
            for(let i = 0;i<this.allMenusListSub.length;i++){
                    if(this.allMenusListSub[i].sid == pid){
                    this.$set(this.allMenusListSub[i],'children',[...res])
                }
            }
            

        },
        comMenus(){
            this.allMenusList.forEach( item=>{
                if(item.isLeaf !=1){
                    this.getRoleMenuSub(item.sid)
                }
            })
            let obj = {
                id:'0',
                sid:'0',
                menuName:'菜单',
                menuLevel:0,
            }
            this.allMenusListSub.unshift(obj)
        },
        handleSelectionChange(data){
            console.log(data);
            this.selectDataList = data
        },
        handleSizeChange(val) {
          this.size = val
          this.current = 1
          this.menuGetPage()
        },
        handleCurrentChange(val) {
          this.current = val
          this.menuGetPage()
        },
    },
};
</script>

<style  lang="less">
.menu-main-box{
    display: flex;
    height: 100%;
    font-size: 14px;
    width: 100%;
    .left-menu-box{
        // width: 200px;
        // float: left;
    }
    .right-menu-box{
        // float: left;
        flex: 1;
        // width: calc(100% - 200px);
        // width: auto;
        // transition: all 0.3s;
    }
    
}
</style>
